<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref">heelo</div>
  </div>
</template>

<script>
export default {
  // 传递的echarts 图表配置
  props: ['option'],
  data() {
    return {
      // chart实例
      chartInstance: null,
      //   图标数据
      allData: null,
      // 当前页数
      currentPage: 1,
      // 总页数
      total: 0,
      timer: null,
    }
  },
  mounted() {
    this.getData()
    this.chartInit()
    this.screenAdapter()
    window.addEventListener('resize', this.screenAdapter)
  },
  methods: {
    chartInit() {
      this.chartInstance = this.$echarts.init(this.$refs.seller_ref, 'chalk')
      this.chartInstance.on('mouseover', () => clearInterval(this.timer))
      this.chartInstance.on('mouseout', () => this.startAnimate())
    },
    async getData() {
      const { data: res } = await this.$http.get('/seller')
      this.allData = res
      // 每页显示5条数据, 总页数
      this.total =
        this.allData.length % 5 === 0
          ? parseInt(this.allData.length / 5) // 15 / 5 = 3
          : parseInt(this.allData.length / 5 + 1) // 15 /6 = 3
      this.allData.sort((a, b) => a.value - b.value)
      this.updateChart()
      this.startAnimate()
    },
    // 渲染图表
    updateChart() {
      // 起始坐标
      const start = (this.currentPage - 1) * 5
      //结束坐标
      const end = this.currentPage * 5
      // 数据的区间
      const showData = this.allData.slice(start, end) // [0,5)
      this.chartInstance.setOption(this.XOption(showData))
    },
    XOption(showData) {
      return {
        title: {
          text: '商家销量排行',
          left: 20,
          top: 20,
        },
        // 图表大小
        grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true,
        },

        // 工具提示和背景
        tootip: {
          trigger: 'axis',
          //   axisPointer: {
          //     type: 'line',
          //     z: 0,
          //     lineStyle: {
          //       width: 66,
          //       color: '#2d3443',
          //     },
          //   },
        },

        toolbox: {
          show: true,
          right: '20',
          top: '20',
          itemSize: 20,
          iconStyle: {
            // color: '#fff',
          },
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            dataView: {
              readOnly: false,
            },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'value',
          max: this.allData[this.allData.length - 1].value,
        },
        yAxis: {
          type: 'category',
          data: showData.map((el) => el.name),
        },
        series: [
          {
            // name: 'seller',
            type: 'bar',
            data: showData.map((el) => el.value),
            label: {
              show: true,
              position: 'right',
              textStyle: {
                color: '#fff',
              },
            },
            barWidth: 66,
            // 柱样式
            itemStyle: {
              barBorderRadius: [0, 33, 33, 0],
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,

                [
                  {
                    offset: 0,
                    color: '#5052ee',
                  },
                  {
                    offset: 1,
                    color: '#ab6ee5',
                  },
                ]
              ),
            },
          },
        ],
      }
    },

    // 开启动画
    startAnimate() {
      clearInterval(this.timer)
      this.timer = setInterval(($) => {
        this.currentPage++
        if (this.currentPage > this.total) {
          this.currentPage = 1
        }
        this.updateChart()
      }, 3000)
    },

    // 监听窗口,适配屏幕
    screenAdapter() {
      const titleFontSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6
      // 分辨率配置
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize,
            },
          },
        },
        series: [
          {
            barWidth: titleFontSize,
            itemStyle: {
              barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],
            },
          },
        ],
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    },
  },
  destroyed() {
    clearInterval(this.timer)
    window.removeEventListener('resize', this.screenAdapter)
  },
}
</script>

<style></style>
